<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 1. 模板语法 -->
    <!-- v-text="值"  纯文本  简写 {{值 }} -->
    <!-- v-html="值"  文本（编译html标签)  -->
    <h2 v-text="mes"></h2>
    <h2 v-html="mes"></h2>

    <!-- 推荐 -->
    <h2>{{ mes }}</h2>
    <hr>
    <!-- 2. 动态属性 -->
    <!-- v-bind:属性名称 = "值" -->
    <a v-bind:href="site">{{ title }}</a>
    s
    <!-- 特殊的加强两个属性 class style -->
    <!-- v-bind:class="对象"  当键值为真值的时候， 会将键名作为类名  -->
    <!-- v-bind:class="数组"  数组中的每一项作为类名 -->
    <h1 v-bind:class="{active: false, active1: true}">天气不错</h1>
    <h1 v-bind:class="[className, 'qwe']">天气不错</h1>
    <hr>
    <!-- 3. 条件指令 -->
    <!-- v-if="布尔值"  是否渲染节点 -->
    <!-- v-show="布尔值"  是否显示隐藏节点 正常渲染的 -->
    <div v-if="0">呵呵</div>
    <div v-else-if="false">哈哈</div>
    <div v-else>嘻嘻</div>

    <div v-show="false">晚上 早点回宿舍 回去玩了就回不去了！！！</div>
    <!-- template 可以使用template标签 编译过程中不会占任何位置   -->
    <template v-if="isShow">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </template>
  </div>


</body>

</html>